<template>
  <div class="phoneLoginContainer">
    <Header></Header>
    <div class="main">
      <div class="content">
        <div class="logo">
          <img class="logoImg" src="http://yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png" alt="">
        </div>
        <div class="loginForm">
          <van-field class="userName" v-model="phone" type="tel" placeholder="请输入手机号"/>
          <van-field class="password" v-model="password" type="password" placeholder="请输入密码"/>
          <div class="help">
            <span class="ForgetPassword">忘记密码？</span>
            <span class="quicklySign">短信快捷登录</span>
          </div>
          <div class="loginButton" @click="login">登录</div>
        </div>
        <div class="otherLogin">
          <span class="text">其他登录方式</span>
          <i class="iconfont icon-jiantou"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PhoneLogin',
  data() {
    return {
      phone: '13700000000',
      password: '111111',
    };
  },
  methods:{
    async login(){
      let {phone,password} = this
      if(phone&&password){
        try {
          await this.$store.dispatch('userLogin',{phone,password})
          let redirect = this.$route.query.redirect || '/'
          console.log(this.$route.query.redirect)
          this.$router.push(redirect)
        } catch (error) {
          alert('登录失败')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .main{
    .content{
      width: 100%;
      height: 402px;
      .logo{
        width: 100%;
        height: 45px;
        margin-top: 28px;
        margin-bottom: 110px;
        text-align: center;
        line-height: 45px;
        .logoImg{
          width: 135px;
          height: 45px;
        }
      }
      .loginForm{
        .userName{
          font-size: 16px;
        }
        .password{
          font-size: 16px;
        }
        .help{
          display: flex;
          justify-content: space-between;
          padding: 0 20px;
          box-sizing: border-box;
          font-size: 15px;
          color: #333333;
          margin: 20px 0;
        }
        .loginButton{
          width: 335.5px;
          height: 45.6px;
          background-color: #DD1A21;
          color: #fff;
          margin: 0 auto;
          text-align: center;
          line-height: 45.6px;
        }
      }
      .otherLogin{
        width: 100%;
        height: 20px;
        margin-top: 40px;
        text-align: center;
        line-height: 20px;
        color: #333333;
        .text{
          font-size: 15px;
        }
      }
    }
  }
</style>
